<template>
	<div class="wrapper">
		<v-head></v-head>
		<el-container style="color:#fff">
			<el-header>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本实验分为无引导充电和有序充电两部分，在无引导充电实验中，请修改选择不同的电动汽车参数，将会得到不同的充电成本和峰谷差。修改完成后，点击运行，观察日负荷变化曲线，记录得到的充电成本、峰谷差数据。
			</el-header>
			<el-main>
				<el-row>
					<!-- <el-col :span="14"> -->
					<div class="grid-content bg-purple" style="float: left;">
						<div id="charge" style="float: left;">
							<!-- 八个小车 -->
							<ul>
								<li class='cars' v-for="(item,index) in carList" :key="index">
									<img class='car' @dblclick='showChargeStation(index);carIndex = index' @click="isOpacity(index)" :src="item.url"
									 :style="{left:item.left+'px',top:item.top+'px',opacity:item.opacity}" alt="">
								</li>
							</ul>
							<!-- 21个箭头 -->
							<ul>
								<li class="arrows" v-for="(item,index) in arrowList" :key="index+'a'">
									<div :class="`${'arrow'} ${'arrow_'+index}`" :style="{top:item.top+'px',left:item.left+'px',transform: 'rotate('+ item.angle +'deg)',opacity:item.opacity}"></div>
								</li>
							</ul>
						</div>
					</div>
					<!-- </el-col> -->
					<!-- <el-col :span="10"> -->
					<div class="grid-content bg-purple-light" id='table'>
						<el-table v-show='isShowTable' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="gridData1"
						 @cell-click="tabClick" :row-class-name="tableRowClassName" :default-sort="{prop: 'id', order: 'ascending'}">
							<el-table-column property="id" label="电动汽车编号" width=70></el-table-column>
							<el-table-column property="chargeType" label="充电类型">
								<template slot-scope="scope">
									<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '充电类型'">
										<el-select v-model="scope.row.chargeType" placeholder="请选择" @change='changeValue(scope.row)'>
											<el-option label="快充" value="快充">
											</el-option>
											<el-option label="慢充" value="慢充">
											</el-option>
										</el-select>
									</span>
									<span v-else>{{ scope.row.chargeType }}</span>
								</template>
							</el-table-column>
							<el-table-column property="arriveTime" label="预计到站时间/时"></el-table-column>
							<el-table-column property="liveTime" label="预计离站时间/时"></el-table-column>
							<el-table-column property="remainCharge" label="到站剩余电量/%">
								<template slot-scope="scope">
									<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '到站剩余电量/%'">
										<el-input v-model="scope.row.remainCharge" type='number' min='10' max='30' onkeyup="if(value>30)value=30;if(value<10)value=10"
										 placeholder="" size="mini" @blur="inputBlur" />
									</span>
									<span v-else>{{ scope.row.remainCharge }}</span>
								</template>
							</el-table-column>
							<el-table-column property="expectCharge" label="期望充电电量/%">
								<template slot-scope="scope">
									<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '期望充电电量/%'">
										<el-input v-model="scope.row.expectCharge" type='number' min='90' max='100' onkeyup="if(value>100)value=100;if(value<90)value=90"
										 maxlength="300" placeholder="" size="mini" @blur="inputBlur" />
									</span>
									<span v-else>{{ scope.row.expectCharge }}</span>
								</template>
							</el-table-column>
							<el-table-column property="area" label="电动汽车容量/kWh"></el-table-column>
							<el-table-column property="power" label="充电功率/KW" width="95">
								<template slot-scope="scope">
									<div v-show="scope.row.id==='1'||scope.row.id==='2'||scope.row.id==='6'||scope.row.id==='7'">{{scope.row.chargeType === "快充"? '30' : '10'}}</div>
									<div v-show="scope.row.id==='3'||scope.row.id==='4'||scope.row.id==='5'||scope.row.id==='8'">{{scope.row.chargeType === "快充"? '50' : '12'}}</div>
								</template>
							</el-table-column>
							<el-table-column property="expectTime" label="充至期望电量时长/h"></el-table-column>
							<el-table-column property="finishTime" label="充电完成时刻/时"></el-table-column>
						</el-table>

						<el-table v-show='isShowInfor' :header-cell-style="headerStyle" :cell-style="cellStyle" :data="inforData"
						 @cell-click="tabClick" :row-class-name="tableRowClassName">
							<el-table-column property="id" label="序号" width=70></el-table-column>
							<el-table-column property="content" label="操作提示"></el-table-column>
						</el-table>
					</div>
					<!-- </el-col> -->
				</el-row>
				<el-button class='solver' size="small" @click="jumpToCarOptimalSolver">优化求解</el-button>
				<el-button class='infor' size="small" @click="isShowInfor = true;isShowTable=false">操作提示</el-button>
				<el-button class='run' size="small" @click="dialogShowLine = true;line1()">运行</el-button>
				<el-button class='list' size="small" @click="isShowTable=true;isShowInfor=false">参数列表</el-button>
				<el-dialog v-dialogDrag title="功率变化曲线图" class="lineDialig" :visible.sync="dialogShowLine">
					<div id="line11" style="width:100%;height:500px"></div>
				</el-dialog>

				<el-dialog class="chongdian chongdian1" title="" :visible.sync="dialogFormVisible">
					<div>
						<li>
							预计到站时间:<el-input v-model="formData.arriveTime" size="mini" placeholder="">
							</el-input>
						</li>
						<li>
							预计离站时间:<el-input v-model="formData.liveTime" size="mini" placeholder="">
							</el-input>
						</li>
						<li>
							到站剩余电量:<el-input v-model="formData.expectTime" size="mini" placeholder="">
							</el-input>
						</li>
						<li>
							电动汽车容量:<el-input v-model="formData.expectCharge" size="mini" placeholder="">
							</el-input>
						</li>
					</div>
					<div class="charges" @click="isQuick = !isQuick">
						<div class="chargeType"></div>
						<div v-show="isQuick" class="chargeType"></div>
					</div>
					<div @click="setValue()" :class="[isStart==true?'button_start':'button_end']"></div>
				</el-dialog>

				<el-dialog class="chongdian chongdian2" title="" :visible.sync="dialogFormVisible1">
					<div>
						<li>
							预计到站时间:<el-input v-model="formData.arriveTime" size="mini" placeholder="">
							</el-input>
						</li>
						<li>
							预计离站时间:<el-input v-model="formData.liveTime" size="mini" placeholder="">
							</el-input>
						</li>
						<li>
							电动汽车容量:<el-input v-model="formData.expectTime" size="mini" placeholder="">
							</el-input>
						</li>
						<li>
							电动汽车余量:<el-input v-model="formData.expectCharge" size="mini" placeholder="">
							</el-input>
						</li>
					</div>
					<div class="charges" @click="isQuick = !isQuick">
						<div class="chargeType"></div>
						<div v-show="isQuick" class="chargeType"></div>
					</div>
					<div @click="setValue()" :class="[isStart==true?'button_start':'button_end']"></div>
				</el-dialog>

			</el-main>
		</el-container>
	</div>
</template>

<script>
	import bus from '../../assets/js/bus.js'
	import vHead from './Header.vue';
	import echarts from 'echarts';
	import '../../assets/css/car_animation.css';
	import '../../assets/js/dialog.js'
	export default {
		components: {
			vHead
		},

		created() {},
		data() {
			return {
				isQuick: false,
				isStart: false,
				carIndex: '',
				formData: {
					arriveTime: '',
					liveTime: '',
					expectTime: '',
					expectCharge: '',
					chargeType: '',
				},
				inforData: [{
						id: "1",
						content:"在左侧充电站动画中，单击矩形车位框，可根据需要配置电动汽车"
					},
					{
						id: "2",
						content:"在左侧充电站动画中，双击电动汽车，可打开充电桩界面"
					},
					{
						id: "3",
						content:"进行充电参数设置"
					},
					{
						id: "4",
						content:"在充电桩界面中，单击闪电按钮，可切换“快充”、“慢充”充电模式"
					},
					{
						id: "5",
						content:"在充电桩界面中，单击红色圆形按钮，完成充电设置"
					},
					{
						id: "6",
						content:"在右侧参数列表中，单击可查看设置结果"
					},
					{
						id: "7",
						content:"单击“运行”按钮，运行电动汽车有序充电实验，并观察记录实验结果"
					}
				],
				gridData: [{
					id: "1",
					chargeType: "慢充",
					arriveTime: "9",
					liveTime: "12",
					remainCharge: "20",
					expectCharge: "100",
					area: "36",
					power: "10",
					expectTime: "2.88",
					finishTime: "11.88",
				}, {
					id: "2",
					chargeType: "慢充",
					arriveTime: "19",
					liveTime: "21",
					remainCharge: "20",
					expectCharge: "100",
					area: "55",
					power: "10",
					expectTime: "4.4",
					finishTime: "21",
				}, {
					id: "3",
					chargeType: "慢充",
					arriveTime: "0",
					liveTime: "9",
					remainCharge: "20",
					expectCharge: "100",
					area: "60",
					power: "12",
					expectTime: "4",
					finishTime: "4",
				}, {
					id: "4",
					chargeType: "慢充",
					arriveTime: "0",
					liveTime: "8",
					remainCharge: "20",
					expectCharge: "100",
					area: "90",
					power: "12",
					expectTime: "6",
					finishTime: "6",
				}, {
					id: "5",
					chargeType: "慢充",
					arriveTime: "19",
					liveTime: "22",
					remainCharge: "10",
					expectCharge: "100",
					area: "75",
					power: "12",
					expectTime: "5.625",
					finishTime: "22",
				}, {
					id: "6",
					chargeType: "慢充",
					arriveTime: "18",
					liveTime: "20",
					remainCharge: "10",
					expectCharge: "95",
					area: "25",
					power: "10",
					expectTime: "2.125",
					finishTime: "20",
				}, {
					id: "7",
					chargeType: "快充",
					arriveTime: "17",
					liveTime: "18",
					remainCharge: "10",
					expectCharge: "95",
					area: "48",
					power: "30",
					expectTime: "1.36",
					finishTime: "18",
				}, {
					id: "8",
					chargeType: "快充",
					arriveTime: "17",
					liveTime: "18",
					remainCharge: "10",
					expectCharge: "95",
					area: "48",
					power: "20",
					expectTime: "1.36",
					finishTime: "18",
				}, ],
				gridData1: [],
				tabClickIndex: null, // 点击的单元格
				tabClickLabel: '',
				isShowTable: false,
				isShowInfor: false,
				dialogShowLine: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				yData: [],
				carList: [{
					top: 363,
					left: 87,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/left1.png'),
				}, {
					top: 352,
					left: 160,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/left2.png'),
				}, {
					top: 331,
					left: 230,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/left3.png'),
				}, {
					top: 321,
					left: 290,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/left4.png'),
				}, {
					top: 372,
					left: 548,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/right1.png'),
				}, {
					top: 357,
					left: 480,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/right2.png'),
				}, {
					top: 338,
					left: 442,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/right3.png'),
				}, {
					top: 335,
					left: 385,
					opacity: 0,
					isCharge: false,
					url: require('../../assets/img/carExper/right4.png'),
				}, ],
				arrowList: [{
						top: 123,
						left: 393,
						angle: 0,
						opacity: 0
					},
					{
						top: 176,
						left: 393,
						angle: 0,
						opacity: 0
					},
					{
						top: 223,
						left: 393,
						angle: 0,
						opacity: 0
					},
					{
						top: 237,
						left: 383,
						angle: 90,
						opacity: 0
					},
					{
						top: 237,
						left: 402,
						angle: -90,
						opacity: 0
					},
					{
						top: 245,
						left: 304,
						angle: 0,
						opacity: 0
					},
					{
						top: 242,
						left: 245,
						angle: 0,
						opacity: 0
					},
					{
						top: 237,
						left: 165,
						angle: 0,
						opacity: 0
					},
					{
						top: 231,
						left: 76,
						angle: 0,
						opacity: 0
					},
					{
						top: 245,
						left: 474,
						angle: 0,
						opacity: 0
					},
					{
						top: 242,
						left: 532,
						angle: 0,
						opacity: 0
					},
					{
						top: 237,
						left: 611,
						angle: 0,
						opacity: 0
					},
					{
						top: 231,
						left: 700,
						angle: 0,
						opacity: 0
					},
					{
						top: 300,
						left: 304,
						angle: 0,
						opacity: 0
					},
					{
						top: 310,
						left: 244,
						angle: 0,
						opacity: 0
					},
					{
						top: 323,
						left: 165,
						angle: 0,
						opacity: 0
					},
					{
						top: 333,
						left: 78,
						angle: 0,
						opacity: 0
					},


					{
						top: 300,
						left: 473,
						angle: 0,
						opacity: 0
					},
					{
						top: 310,
						left: 532,
						angle: 0,
						opacity: 0
					},
					{
						top: 323,
						left: 610,
						angle: 0,
						opacity: 0
					},
					{
						top: 333,
						left: 696,
						angle: 0,
						opacity: 0
					},
				],
				timer: null
			}
		},
		methods: {
			jumpToCarOptimalSolver() {
				this.$router.push('/CarOptimalSolver');
			},
			cellStyle() {
				return "backgroundColor:#011633;color:#ccc;text-align:center"
			},
			headerStyle() {
				return "text-align:center"
			},
			//汽车是否显示
			isOpacity(index) {
				let _this = this;
				clearTimeout(this.timer); //首先要清除定时器
				this.timer = setTimeout(function() {
					//这里面写单击事件的逻辑
					if (_this.carList[index].opacity == 1 && _this.carList[index].isCharge == false) {
						_this.carList[index].opacity = 0
					} else {
						_this.carList[index].opacity = 1
					}
				}, 400); //定时器时间

			},
			// 点击充电
			setValue() {
				console.log(this.carIndex);
				let a = this.carIndex - 0;
				let allData = this.gridData1
				this.carList[a].isCharge = !this.carList[a].isCharge;
				this.isStart = !this.isStart;
				if (this.carList[a].isCharge == true) {
					this.gridData1.push(this.gridData[a]);
					console.log(this.gridData1)
					this.isStart = true;
					let x = 1;
					this.showArrow(x)
				} else {
					this.isStart = false;
					for (let i = 0; i < allData.length; i++) {
						console.log(allData[i].id)
						if (allData[i].id - 1 == a) {
							allData.splice(i, 1);
						}
					}
					let x = 0;
					this.showArrow(x)
				}
				this.gridData1 = allData;
				this.gridData[a].arriveTime = this.formData.arriveTime;
				this.gridData[a].liveTime = this.formData.liveTime;
				this.gridData[a].expectTime = this.formData.expectTime;
				this.gridData[a].expectCharge = this.formData.expectCharge;
				if (this.isQuick == true) {
					this.gridData[a].chargeType = '快充'
				} else {
					this.gridData[a].chargeType = '慢充'
				}
			},
			//控制箭头显示
			showArrow(x) {
				let _this = this;
				let a = _this.carIndex - 0;
				_this.arrowList[0].opacity = x;
				_this.arrowList[1].opacity = x;
				_this.arrowList[2].opacity = x;
				//控制箭头显示
				if (a == 0) {
					_this.arrowList[3].opacity = x;
					_this.arrowList[8].opacity = x;
					_this.arrowList[16].opacity = x;
				} else if (a == 1) {
					_this.arrowList[3].opacity = x;
					_this.arrowList[7].opacity = x;
					_this.arrowList[15].opacity = x;
				} else if (a == 2) {
					_this.arrowList[3].opacity = x;
					_this.arrowList[6].opacity = x;
					_this.arrowList[14].opacity = x;
				} else if (a == 3) {
					_this.arrowList[3].opacity = x;
					_this.arrowList[5].opacity = x;
					_this.arrowList[13].opacity = x;
				} else if (a == 4) {
					_this.arrowList[4].opacity = x;
					_this.arrowList[12].opacity = x;
					_this.arrowList[20].opacity = x;
				} else if (a == 5) {
					_this.arrowList[4].opacity = x;
					_this.arrowList[11].opacity = x;
					_this.arrowList[19].opacity = x;
				} else if (a == 6) {
					_this.arrowList[4].opacity = x;
					_this.arrowList[10].opacity = x;
					_this.arrowList[18].opacity = x;
				} else if (a == 7) {
					_this.arrowList[4].opacity = x;
					_this.arrowList[9].opacity = x;
					_this.arrowList[17].opacity = x;
				}
			},

			//展示充电桩弹窗
			showChargeStation(index) {
				clearTimeout(this.timer);
				let _this = this;

				if (this.carList[index].isCharge == true) {
					this.isStart = true
				} else {
					this.isStart = false
				}
				if (_this.carList[index].opacity == 1) {
					if (index == 4 || index == 5) {
						this.dialogFormVisible = true
					} else {
						this.dialogFormVisible1 = true
					}
				}

				let a = index;
				if (this.gridData[a].chargeType == '快充') {
					this.isQuick = true
				} else {
					this.isQuick = false
				}

				this.formData.arriveTime = this.gridData[a].arriveTime;
				this.formData.liveTime = this.gridData[a].liveTime;
				this.formData.expectTime = this.gridData[a].expectTime;
				this.formData.expectCharge = this.gridData[a].expectCharge;

			},
			inputBlur(row, event, column) {
				this.tabClickIndex = null;
				this.tabClickLabel = '';
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				// 把每一行的索引放进row
				row.index = rowIndex;
			},
			tabClick(row, column, cell, event) {
				this.rowName = row.name;
				switch (column.label) {
					case '充电类型':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						break
					case '到站剩余电量/%':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						break
					case '期望充电电量/%':
						this.tabClickIndex = row.index
						this.tabClickLabel = column.label
						break
					default:
						return
				}
			},
			changeValue(row) {
				let _this = this;
				_this.$forceUpdate();
				_this.inputBlur()
				console.log(row)
				_this.line1()
			},
			line1() {
				this.$nextTick(function() {
					this.showLine()
				})
			},

			showLine() {
				var pload = [279, 275.9, 271.25, 248, 240.25, 232.5, 234.05, 124, 93, 38.75, 93, 125.55, 93, 120.9, 190.65, 279,
					249.55, 217, 232.5, 426.25, 410.75, 387.5, 325.5, 310
				]
				this.yData[0] = [];
				this.yData[1] = [];
				this.yData[2] = [];
				this.yData[3] = [];
				let y1 = [];
				let allData = this.gridData1;
				for (let i = 1; i < 25; i++) {
					let p = 0;
					let evp = [];
					for (let j = 0; j < allData.length; j++) {
						if (allData[j].chargeType == '慢充') {
							if ((allData[j].arriveTime - 0) <= i && i <= (allData[j].finishTime - 0)) {
								if (allData[j].id == '1' || allData[j].id == '2' || allData[j].id == '6' || allData[j].id == '7') {
									p += 10;
									evp[j] = 10
								} else {
									p += 12;
									evp[j] = 12
								}

							} else {
								evp[j] = 0
							}
						} else if (allData[j].chargeType == '快充') {
							if ((allData[j].arriveTime - 0) <= i && i <= (allData[j].finishTime - 0)) {
								if (allData[j].id == '1' || allData[j].id == '2' || allData[j].id == '6' || allData[j].id == '7') {
									p += 30;
									evp[j] = 30
								} else {
									p += 50;
									evp[j] = 50
								}

							} else {
								evp[j] = 0
							}
						}
					}
					this.yData[0].push(p);
					this.yData[2].push(p + pload[i]);
					y1.push(evp)
				}
				this.yData[3] = pload;
				this.yData[1] = changearr(y1);
				//横纵坐标轴变换
				function changearr(oldarr) {
					var maxLength = 8;
					var rowarr = [],
						rowoldarr = [];
					for (var k = 0; k < oldarr.length; k++) {
						for (var m = 0; m < maxLength; m++) {
							if (!rowarr[m]) rowarr[m] = [];
							rowarr[m].push(oldarr[k][m]);
							if (!rowoldarr[m]) rowoldarr[m] = [];
							rowoldarr[m].push(oldarr[k][m]);
						}
					}
					return rowarr;
				}
				var main = echarts.init(document.getElementById('line11'));
				var xAxis = [];
				var yAxis = [];
				var series = [];
				var titles = ['一日内总充电功率变化曲线', '一日内车辆充电功率曲线', '一日内总功率变化曲线', '一日内无电动汽车影响的总功率变化曲线']
				var xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
				for (var i = 0; i < 4; i++) {
					xAxis.push({
						type: 'category',
						data: xdata,
						name: '时间/h',
						nameTextStyle: { // 名称样式
							fontSize: 12,
							color: '#fff',
						},
						gridIndex: i,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						}
					});
					yAxis.push({
						type: 'value',
						name: '有功功率(kW)',
						nameTextStyle: { // 名称样式
							fontSize: 12,
							color: '#fff',
						},
						gridIndex: i,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff'
							}
						}
					});
					if (i != 1) {
						series.push({
							data: this.yData[i],
							type: 'line',
							xAxisIndex: i,
							yAxisIndex: i,
						});
					} else if (i == 1) {
						for (let i = 0; i < this.yData[1].length; i++) {
							series.push({
								data: this.yData[1][i],
								type: 'line',
								xAxisIndex: 1,
								yAxisIndex: 1,
							});
						}
					}

				}
				main.clear()
				main.resize();
				var option = {
					title: [{
							text: titles[0],
							left: '25%',
							top: '0%',
							textAlign: 'center',
							textStyle: {
								color: '#fff'
							}
						},
						{
							text: titles[1],
							left: '73%',
							top: '0%',
							textAlign: 'center',
							textStyle: {
								color: '#fff'
							}
						},
						{
							text: titles[2],
							left: '25%',
							top: '49%',
							textAlign: 'center',
							textStyle: {
								color: '#fff'
							}
						},
						{
							text: titles[3],
							left: '73%',
							top: '49%',
							textAlign: 'center',
							textStyle: {
								color: '#fff'
							}
						}

					],
					grid: [{
							x: '5%',
							y: '9%',
							width: '36%',
							height: '32%'
						},
						{
							x2: '7%',
							y: '9%',
							width: '36%',
							height: '32%'
						},
						{
							x: '5%',
							y2: '9%',
							width: '36%',
							height: '32%'
						},
						{
							x2: '7%',
							y2: '9%',
							width: '36%',
							height: '32%'
						}
					],
					xAxis: xAxis,
					yAxis: yAxis,
					series: series
				};
				echarts.init(document.getElementById('line11')).setOption(option);
			}

		}
	}
</script>

<style scoped="scoped">
	body .wrapper {
		background-image: url(../../assets/img/background.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.el-header {
		margin: 0 auto;
		margin-top: 50px;
		width: 90%;
		color: #00FFFF;
		line-height: 50px;
		font-size: 22px;
		height: 100px !important;
		background-image: url(../../assets/img/carExper/content.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.el-container {
		width: 100%;
		height: 92%;
		background-image: url(../../assets/img/carExper/background.png);
		background-size: 99% 100%;
		margin-left: 15px;
		background-repeat: no-repeat;
	}

	.el-main {
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
	}

	#charge {
		width: 800px;
		height: 455px;
		margin-left: 25px;
		background-image: url(../../assets/img/carExper/charge2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		overflow: hidden;
	}

	.car {
		transform: scale(0.5);
		position: absolute;
		cursor: pointer;
	}

	/* 箭头 */
	.arrow {
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top: 5px solid;
		border-top-color: #2fe769;
		position: absolute;
		top: 25px;
		left: 117px;
		z-index: 10;
	}

	/* 表格 */
	#table {
		position: relative;
	}

	/* 表格输入框 */
	#table>>>.cell .el-input--mini .el-input__inner {
		height: 23px;
		padding: 0
	}

	/* 表格下拉框 */
	i {
		font-size: 30px;
		float: left;
		line-height: 40px;
		cursor: pointer;
	}

	#table>>>.el-input__inner {
		padding: 0 !important;
		height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.el-table {
		position: absolute;
		left: 845px;
		right: 5px;
		width: auto
	}

	/* 按钮 */
	.el-button.el-button--default.el-button--small,
	.el-button.el-button--primary.el-button--small {
		width: 80px;
		background-image: url(../../assets/img/button_blue.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
		position: absolute;
		right: 40px;
		bottom: 40px;
	}

	.el-button.el-button--default.el-button--small:hover,
	.el-button.el-button--primary.el-button--small:hover {
		width: 80px;
		background-image: url(../../assets/img/button_red.png);
		background-size: 100% 100%;
		border: none;
		color: rgb(178, 235, 248);
		position: absolute;
		right: 40px;
		bottom: 40px;
	}

	button.solver {
		bottom: 40px !important;
		right: 340px !important;
		width: 120px;
	}

	button.list {
		bottom: 40px !important;
		right: 140px !important;
	}

	button.infor {
		bottom: 40px !important;
		right: 240px !important;
	}

	/* 充电桩弹窗 */
	.chongdian>>>.el-dialog {
		background-size: 100% 100%;
		height: 80%;
		width: 35%;
		border: none;
		background-repeat: no-repeat;
		background-color: transparent;
		box-shadow: none;
		position: relative;
	}

	.chongdian1>>>.el-dialog {
		background-image: url(../../assets/img/carExper/dialog/orange.png);
	}

	.chongdian2>>>.el-dialog {
		background-image: url(../../assets/img/carExper/dialog/green.png);
	}


	.chongdian li {
		color: #ccc;
		text-align: center;
		margin-top: 2%;
		list-style: none;
	}

	.chongdian li:nth-child(1) {
		margin-top: 3.8%
	}

	.chongdian li .el-input {
		width: 24%;
	}

	.chongdian>>>.el-dialog__headerbtn {
		top: 2%;
		right: 25%
	}

	.chongdian>>>.el-dialog__headerbtn i {
		color: #000000 !important;
		font-weight: 600;
	}

	.charges {
		position: absolute;
		left: 48%;
		top: 46%;
		cursor: pointer;
	}

	.chargeType {
		height: 25px;
		width: 15px;
		float: left;
		background-image: url(../../assets/img/carExper/dialog/shan.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.button_start {
		height: 20px;
		width: 20px;
		position: absolute;
		background-image: url(../../assets/img/carExper/dialog/button_green.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		left: 57%;
		top: 46%;
		cursor: pointer;
	}

	.button_end {
		height: 20px;
		width: 20px;
		position: absolute;
		background-image: url(../../assets/img/carExper/dialog/button_red.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		left: 57%;
		top: 46%;
		cursor: pointer;
	}
</style>
<style>
	.el-dialog__wrapper.lineDialig .el-dialog__header {
		height: 50px !important;
	}

	.el-dialog__wrapper.lineDialig .el-dialog__header button.el-dialog__headerbtn {
		z-index: 99999 !important;
		top: 40px !important;
	}

	.el-dialog {
		width: 47%
	}
</style>
